<template>
  <div>
    <el-dialog
      v-bind="$attrs"
      v-on="$listeners"
      :visible.sync="dialogVisible"
      @open="onOpen"
      @close="onClose"
      :title="$t('model.data-masking')"
    >
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item :label="$t('model.security-level-code')" prop="securityLevelCode">
          <el-select
            v-model="formData.securityLevelCode"
            :placeholder="$t('model.select-security-level-code')"
            filterable
            clearable
            :style="{width: '100%'}"
          >
            <el-option
              v-for="(item, index) in securityLevelCodeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('model.mask-rule')" prop="datamaskId">
          <el-select
            v-model="formData.datamaskId"
            :placeholder="$t('model.select-mask-rule')"
            filterable
            clearable
            :style="{width: '100%'}"
          >
            <el-option
              v-for="(item, index) in maskRuleOptions"
              :key="index"
              :label="item.name"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div>{{$t('base.select-columns')}}</div>
      <el-table :data="columnInfoData" style="width: 100%" ref="columnInfo">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="title" :label="$t('model.field-chinese-name')" width="280"></el-table-column>
        <el-table-column prop="name" :label="$t('model.field-english-name')" width="280"></el-table-column>
        <el-table-column prop="type" :label="$t('model.field-type')"></el-table-column>
      </el-table>
      <div slot="footer">
        <el-button @click="close">{{$t('base.cancel')}}</el-button>
        <el-button type="primary" @click="handelConfirm">{{$t('base.ok')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  inheritAttrs: false,
  components: {},
  props: {
    dialogVisible: {
      type: Boolean,
      required: true
    },
    tableId: {
      type: Number,
      required: true
    },
    columnInfoData: {
      type: Array
    }
  },
  data() {
    return {
      formData: {
        securityLevelCode: undefined,
        datamaskId: undefined
      },
      rules: {
        securityLevelCode: [
          {
            required: true,
            message: this.$t("model.select-security-level-code"),
            trigger: "change"
          }
        ],
        datamaskId: [
          {
            required: true,
            message: this.$t("model.select-mask-rule"),
            trigger: "change"
          }
        ]
      },
      securityLevelCodeOptions: [
        {
          label: this.$t("model.security-level-code-fouth"),
          value: 4
        },
        {
          label: this.$t("model.security-level-code-thrid"),
          value: 3
        },
        {
          label: this.$t("model.security-level-code-second"),
          value: 2
        },
        {
          label: this.$t("model.security-level-code-first"),
          value: 1
        }
      ],
      maskRuleOptions: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onOpen() {
      var _this = this;
      this.axios
        .post(this.MASK_HOST + "mask/enablelist")
        .then(function(res) {
          res = res.data;
          if (res.status == "1") {
            _this.maskRuleOptions = res.data;
          } else {
            console.log(res.stackmessage);
          }
          _this.loading = false;
        })
        .catch(function(err) {
          console.log(err);
        });
    },
    onClose() {
      this.$refs["elForm"].resetFields();
      this.$emit("maskDialogClose", this.dialogVisible);
    },
    close() {
      this.$emit("maskDialogClose", this.dialogVisible);
    },
    handelConfirm() {
      var selectRows = this.$refs.columnInfo.selection;
      var ids = [];
      var columnNames = [];
      for (var i = 0; i < selectRows.length; i++) {
        ids.push(selectRows[i].columnId);
        columnNames.push(selectRows[i].name);
      }
      this.$refs["elForm"].validate(valid => {
        if (!valid) return;
        var _this = this;
        _this.axios
          .post(this.HOST + "modelcolumn/multiSaveMaskRule", {
            tableId: this.tableId,
            columnIds: ids,
            columnNames: columnNames,
            securityLevelCode: this.formData.securityLevelCode,
            datamaskId: this.formData.datamaskId
          })
          .then(function(res) {
            res = res.data;
            if (res.status == "1") {
              if (res.data) {
                _this.$refs["elForm"].resetFields();
                _this.$emit("maskDialogSave", _this.dialogVisible);
              } else {
                _this.$message.error(_this.$t("model.exist-quality-rule"));
              }
            } else {
              console.log(res.stackmessage);
            }
          })
          .catch(function(err) {
            console.log(err);
          });
      });
    }
  }
};
</script>
<style scoped>
.select-columns {
  text-align: left;
  line-height: 30px;
}
</style>
